<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>月报统计</title> 
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${WEB_PATH}/resources/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/style.min.css?v=5.0.0" rel="stylesheet"><base target="_blank">
	<link href="${WEB_PATH}/resources/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<link href="${WEB_PATH}/resources/js/plugins/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
	<link href="${WEB_PATH}/resources/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/jsTree/style.min.css" rel="stylesheet">
	<link href="${WEB_PATH}/resources/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
	<#import "/common/import.ftl" as import>
    <style>
    .widget.style1 h2 {
	    font-size: 40px;
	}
	.widget.style1 h3{
	    font-size: 24px;
	}
	.demo:after {
	    background-color: #F5F5F5;
	    border: 1px solid #DDDDDD;
	    border-radius: 4px 0 4px 0;
	    color: #9DA0A4;
	    content: "条件查询：";
	    font-size: 12px;
	    font-weight: bold;
	    left: -1px;
	    padding: 3px 7px;
	    position: absolute;
	    top: -1px;
	}
	.demo {
	    margin-left: 0px;
	    padding:40px 15px 0px;
	    border: 1px solid #DDDDDD;
	    border-radius: 4px;
	    position: relative;
	    word-wrap: break-word;
	}
	</style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">	
			<div class="col-sm-12">
			    <div class="ibox float-e-margins">
			        <div class="ibox-title">
			            <h5>月报统计</h5>
			            <div class="ibox-tools">
				            <button class="btn btn-primary btn-sm" type="button" id="brack_btn" style="margin-top: -8px;"><i class="glyphicon glyphicon-menu-left"></i>&nbsp;返回</button>
			            </div>
			        </div>
			        <div class="ibox-content" style="height: auto;"> 
			        	<div style="" class="demo ui-sortable">
	                    		 <div class="row"> 
		                            <div class="col-sm-3">
		                                <div class="form-group">
		                                    <label>所属地州：</label>
	    									<select style="width:200px;"  name="areaId" id="areaId">
				                        		 <option value="all"  >全部</option> 
				                        	     <#list areaListMap as info>
									                 <option value="${info.ID}" hassubinfo="true">${info.name}</option>
									             </#list>
					                        </select>
		                                </div>
		                            </div>
		                            <div class="col-sm-2" id="organization_id" >
					                    <div class="form-group">
					                        <label>年份：</label>
					                        <input type="text" class="input-sm form-control" id="year" name="year" style="background-color: #FFF;" placeholder="请选择开展环检日期" readonly value="${yearDay}"/>
										</div>
					                </div>   
		                        </div>
		                    </div>
		                    <div class="row" style="padding-top: 40px;">
		                    	<div class="col-sm-12" id="dzscbgtj_bar" style="height:450px;"></div>
		                    </div>
			        </div>
			    </div>
			</div> 
	 	</div>
	</div>
</body>
<script src="${WEB_PATH}/resources/js/jquery.min.js?v=2.1.4"></script>
    <script src="${WEB_PATH}/resources/js/ajax.extend.js"></script>
    <script src="${WEB_PATH}/resources/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="${WEB_PATH}/resources/js/plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
	<script src="${WEB_PATH}/resources/js/plugins/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/wizard/jquery.bootstrap.wizard.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/validate/jquery.validate.method.js"></script>
	<script src="${WEB_PATH}/resources/js/plugins/layer/layer.js"></script> 
	<script src="${WEB_PATH}/resources/js/city-picker.data.js"></script>
	<script src="${WEB_PATH}/resources/js/city-picker.js"></script>
	<script src="${WEB_PATH}/resources/js/plugins/jsTree/jstree.min.js"></script>
	<script src="${WEB_PATH}/resources/js/plugins/echarts/echarts-all.js"></script>
<script>
$(function(){ 
	$('#year').datetimepicker({
	    language:  'zh-CN',
		format:'yyyy',
	    weekStart: !1,
	    todayBtn:  !1,
		autoclose: 1,
		todayHighlight: !1,
		startView: 4,
		minView: 4,
		forceParse: 0,
		maxView:4
    });
	$("#areaId").chosen({width:'100%'});
	initGdztjMonth("","init",""); 
	$("#brack_btn").click(function(){
		initGdztjMonth("","init",""); 
	});
});


function initGdztjMonth(areaId,type,title){
	  if(type=="init"){
	  	 $("#brack_btn").hide(); 
	  }else{
	  	 $("#brack_btn").show(); 
	  }
	  var echarts_dzscbgtj_bar = echarts.init(document.getElementById("dzscbgtj_bar"));
	  echarts_dzscbgtj_bar.showLoading({
	            text: "图表数据正在努力加载..."
	  });
	  $.ajax({
		type: 'GET',
		url: '${WEB_PATH }/ports/monthreport/monthReportsInfo.do',  
		data: {areaId:areaId,year:'2016'},
		dataType: "json",
		success:function(result){
			console.log(result);
			if(result.success){
			    echarts_dzscbgtj_bar.hideLoading();
				var markPointv = {
				    clickable:false,
	                data : [
	                    {type : 'max', name: '最大值'},
	                    {type : 'min', name: '最小值'}
	                ]
	            };
	            for(var x=0;x<result.barseriesData.length;x++){
	            	result.barseriesData[x].markPoint = markPointv;
	            }
				var option = initOption(result.barLegend,result.xAxisData,result.barseriesData,type);
				echarts_dzscbgtj_bar.setOption(option), 
				$(window).resize(echarts_dzscbgtj_bar.resize);
			}else{
				layer.msg('<font color="red">统计数据出现问题，请稍后再试！。</font>', {icon: 5}); 
			}
		}
	  });   
}


function initOption(barLegend,xAxisData,seriesData,type){
    var axisLabel_v = {
         interval:0,
         rotate:30,
         margin:2,
         clickable:true,
         textStyle:{
             color:"lightskyblue",
             fontWeight:"bold"
         }
    };
	var option = {
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:barLegend
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : xAxisData
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : seriesData
	}; 
	if(type == "init"){
		option.xAxis[0].axisLabel = axisLabel_v;
	} 
	return option;
}
</script>
<!-- 报告上传统计 -->
 
 